<template>
    <div>
        <div style="display: flex;flex-direction: row;">
            <div class="el-upload__tip" style="width: 200px">上传变化前图片</div>
            <div class="el-upload__tip" style="width: 200px">上传变化后图片</div>
        </div>
        <div style="display: flex;flex-direction: row;max-height: 350px;min-height: 150px;">
            <el-scrollbar>
                <div style="display: flex;flex-direction: row;">
                    <div style="width:200px">
                        <el-upload
                                :disabled="disable"
                                id="upload-resource"
                                :action="this.$global.apiUrl+'file/uploadImg'"
                                list-type="picture-card"
                                :file-list="fileList"
                                :on-success="handleSuccess"
                                :on-change="handleChange"
                                accept="image/jpeg,image/png,image/tiff,image/tif"
                                :before-upload="checkFileType"
                                multiple>
                            <div slot="default">
                                <el-popover
                                        placement="top-start"
                                        title="上传图片"
                                        width="200"
                                        trigger="hover">
                                    <el-button size="medium" @click="chooseFile">本地</el-button>
                                    <el-button size="medium" @click="callDrawer(1)">图片库</el-button>
                                    <div slot="reference" class="plusIcon" @mouseleave="disable=false" @mouseenter="disable=true">
                                        <i  class="el-icon-plus"></i>
                                    </div>
                                </el-popover>
                            </div>

                            <div slot="file" slot-scope="{file}" v-loading="file.loading">
                                <el-image
                                        ref="preview"
                                        style="width: 100%; height: 100%"
                                        :src="file.url">
                                </el-image>
                                <el-image-viewer
                                        v-if="showViewer"
                                        :on-close="handlePictureCardPreviewClose"
                                        :url-list="srcList"
                                ></el-image-viewer>
                                <span class="el-upload-list__item-actions">
                <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)">
                    <el-tooltip content="放大" placement="top">
                        <i class="el-icon-zoom-in"></i>
                    </el-tooltip>
                </span>
                        <span
                                class="el-upload-list__item-preview"
                                @click="showTarget(file)">
                    <el-tooltip content="查看" placement="top">
                        <i class="el-icon-d-arrow-right"></i>
                    </el-tooltip>
                </span>
                        <span
                                class="el-upload-list__item-delete"
                                @click="handleRemove(file)">
                            <el-tooltip content="删除" placement="top">
                                <i class="el-icon-delete"></i>
                            </el-tooltip>
                        </span>
                    </span>
                            </div>
                        </el-upload>
                    </div>
                    <div  style="width:200px;">
                        <el-upload
                                :disabled="disable"
                                id="upload-resource2"
                                :action="this.$global.apiUrl+'file/uploadImg'"
                                list-type="picture-card"
                                :file-list="fileList2"
                                :on-success="handleSuccess"
                                :on-change="handleChange2"
                                accept="image/jpeg,image/png,image/tiff,image/tif"
                                :before-upload="checkFileType"
                                multiple>
                            <div slot="default">
                                <el-popover
                                        placement="top-start"
                                        title="上传图片"
                                        width="200"
                                        trigger="hover">
                                    <el-button size="medium" @click="chooseFile2">本地</el-button>
                                    <el-button size="medium" @click="callDrawer(2)">图片库</el-button>
                                    <div slot="reference" class="plusIcon" @mouseleave="disable=false" @mouseenter="disable=true">
                                        <i  class="el-icon-plus"></i>
                                    </div>
                                </el-popover>
                            </div>

                            <div slot="file" slot-scope="{file}" v-loading="file.loading">
                                <el-image
                                        ref="preview"
                                        style="width: 100%; height: 100%"
                                        :src="file.url" :preview-src-list="srcList">
                                </el-image>
                                <span class="el-upload-list__item-actions">
                <span
                        class="el-upload-list__item-preview"
                        @click="handlePictureCardPreview(file)">
                    <el-tooltip content="放大" placement="top">
                        <i class="el-icon-zoom-in"></i>
                    </el-tooltip>
                </span>

                <span
                        class="el-upload-list__item-delete"
                        @click="handleRemove2(file)">
                    <el-tooltip content="删除" placement="top">
                        <i class="el-icon-delete"></i>
                    </el-tooltip>
                </span>
            </span>
                            </div>
                        </el-upload>
                    </div>
                </div>

            </el-scrollbar>
        </div>
    </div>

</template>

<script>
    import eventBus from "../../global/eventBus";
    import ElImageViewer from "element-ui/packages/image/src/image-viewer";
    import Tiff from 'tiff.js';
    export default {
        name: "CDPhotoList",
        data() {
            return {
                showViewer: false,
                disable:false,
                fileList:[],
                fileList2:[],
                srcList: [],
                repoIndex:1,//指示图片库中的图片应该放在哪个框中

            };
        },
        created() {
            var that = this
            eventBus.$on('repo2wks',data=>{
                data.forEach(item=>{
                    var file={}
                    file.url=item.url
                    file.url4req = item.url4req
                    if(this.repoIndex===1){
                        that.fileList.push(file)
                    }else{
                        that.fileList2.push(file)
                    }

                })
            })
        },
        mounted(){
            this.fileList = this.$ls.get('fileList',[])
            if(this.fileList.length>0){
                this.fileList2 = this.$ls.get('fileList2',[])
            }else{
                this.$ls.remove('fileList2')
            }

        },
        components: {
            ElImageViewer,
        },
        methods: {
            checkFileType (file) {
                const fileName = file.name
                const fileType = fileName.substring(fileName.lastIndexOf('.'))
                if (
                    fileType === '.jpg' ||
                    fileType === '.png' ||
                    fileType === '.jpeg' ||
                    fileType === '.bmp' ||
                    fileType === '.gif' ||
                    fileType === '.tif' ||
                    fileType === '.tiff'
                ) {
                    // 判断是否tif
                    // console.log(file.url);
                    // console.log(fileType)
                    // let isTif = ['.tif', '.tiff'].includes(fileType);
                    // if (isTif) {
                    //     this.notriff = 0;
                    //     this.riff = 1;
                    // } else {
                    //     this.riff = 0;
                    //     this.notriff = 1;
                    // }
                }else {
                    this.$message.error(
                        '请上传正确的图片类型'
                    )
                    return false
                }
            },
            //显示当前图片的结果
            showTarget(file){
                this.$emit('showTarget',file)
            },
            runDemo(){
                const file1 = {}
                const file2 ={}
                file1.url = file1.url4req='https://cdn.bewcf.info/softwareCup/98e09cce-7b4f-4a49-bd7a-5a39b004209e.png'
                file2.url=file2.url4req='https://cdn.bewcf.info/softwareCup/596d2816-d604-454c-bd79-6ea90ffdd81c.png'
                var flag = false
                if(this.fileList.length>0){
                    this.fileList.forEach(item=>{
                        if(item.url===file1.url){
                            flag=true
                        }
                    })
                }
                if(!flag){
                    if(Object.keys(file1).length!==0&&Object.keys(file2).length!==0){
                        this.fileList.push(file1)
                        this.fileList2.push(file2)
                    }
                }else{
                    this.$message.error('当前文件已经存在!');
                }

            },
            chooseFile() {
                document.querySelector("#upload-resource .el-upload").click()
            },
            chooseFile2() {
                document.querySelector("#upload-resource2 .el-upload").click()
            },
            callDrawer(index){
                this.repoIndex=index
                eventBus.$emit('callDrawer',true)
            },
            handleRemove(file) {
                var index = this.fileList.indexOf(file)
                this.fileList.splice(index,1)
                this.$emit('handleRemove',file)
            },
            handleRemove2(file) {
                var index = this.fileList2.indexOf(file)
                this.fileList2.splice(index,1)
                this.$emit('handleRemove',file)
            },
            handlePictureCardPreviewClose() {
                document.documentElement.style.overflowY = 'auto'
                this.showViewer = false
            },
            handlePictureCardPreview(file) {
                document.documentElement.style.overflowY = 'hidden'
                this.showViewer = true
                this.srcList=[]
                this.srcList.push(file.url)
                // this.$refs.preview.showViewer = true
            },

            handleChange(file, fileList) {
                file.loading=!file.loading
                if(file.loading){
                    var type = file.name.substring(file.name.lastIndexOf('.'))
                    if (type==='.tif'||type==='.tiff') {
                        try {
                            var xhr = new XMLHttpRequest();
                            xhr.responseType = 'arraybuffer';
                            xhr.open('GET', file.url);
                            xhr.onload = (e) => {
                                var tiff = new Tiff({ buffer: xhr.response });
                                var canvas = tiff.toCanvas();
                                file.url = canvas.toDataURL();
                            };
                            xhr.send();
                        }catch (e) {
                            // this.src = this.file.url;
                        }
                    }
                }
                this.fileList = fileList;
            },
            handleChange2(file, fileList) {
                file.loading=!file.loading
                if(file.loading){
                    var type = file.name.substring(file.name.lastIndexOf('.'))
                    if (type==='.tif'||type==='.tiff') {
                        try {
                            var xhr = new XMLHttpRequest();
                            xhr.responseType = 'arraybuffer';
                            xhr.open('GET', file.url);
                            xhr.onload = (e) => {
                                var tiff = new Tiff({ buffer: xhr.response });
                                var canvas = tiff.toCanvas();
                                file.url = canvas.toDataURL();
                            };
                            xhr.send();
                        }catch (e) {
                            // this.src = this.file.url;
                        }
                    }
                }
                this.fileList2 = fileList;
            },
            handleSuccess(res,file,fileList){
                if(res.code===200){
                    try {
                        var type = res.data.substring(res.data.lastIndexOf('.'))
                        if (type==='.tif'||type==='.tiff') {
                            var xhr = new XMLHttpRequest();
                            xhr.responseType = 'arraybuffer';
                            xhr.open('GET', res.data);
                            xhr.onload = (e) => {
                                var tiff = new Tiff({ buffer: xhr.response });
                                var canvas = tiff.toCanvas();
                                file.url = canvas.toDataURL();
                            };
                            xhr.send();
                        } else {
                            file.url=res.data
                        }
                        file.url4req=res.data
                    }catch (e) {
                        this.$message.error('网络错误，稍后再试')
                    }
                }
            },
            // handleSuccess2(res,file,fileList){
            //     if(res.code===200){
            //         file.url=res.data
            //     }
            // }
        }
    }
</script>

<style scoped>
    .plusIcon{
        display: flex;
        align-items: center;
        justify-content: center;
        width: 150px;
        height: 150px;
    }
    /deep/ .el-scrollbar__wrap {
        overflow-x: hidden;
    }
</style>
